<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>local-gps</title>
	<link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
	<style type="text/css">
	.maparea{
		position:relative;
		display: block;
		margin:8px;
		background-color:#ddd;
		overflow: hidden;
		box-sizing: border-box;
	}
	.maparea p{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		height: 40px;
		line-height: 40px;
		text-indent: 6px;
		overflow: hidden;
		background-color:rgba(0,0,0,.7);
		color: #fff;
	}
	</style>
</head>

<body ontouchstart="">
		<header>
		    <div class="titlebar">
		        <a class="titlebar-button" href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
		        <h1 class="titlebar-title">GPS定位</h1>
		    </div>
		</header>
		<article>
			<div class="card">切记，Exmobi里不要用！</div>
		    <div class="maparea">
		    	<img src="" alt="" id="maparea_img" />
		        <p>南京烽火</p>
		    </div>
		    <a class="button cancel block" style="margin:8px" id="onkeyGuide" title="点击一键导航">点击一键导航</a>
		    <a class="button info block" style="margin:8px"  href="tel:4001101111">打电话</a>
		    <a class="button info block" style="margin:8px"  href="sms:4001101111">发短信</a>
		    <a class="button info block" style="margin:8px"  href="mailto:support@nj.fiberhome.com.cn">发邮件</a>
		    <div id="location" class="card" style="padding:8px;"></div>
		</article>
	
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
    <!--百度地图-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hKVZaBtXr1VA3m1wDZZ2d3VG"></script>

	<script>
	window.addEventListener("load",function(){
		
		var b=new BaiduMap();
		b.gps(function(point,address){
			var y=point.lng,x=point.lat;
			
			//将坐标与地址打印
			document.getElementById("location").innerHTML="您现在的位置在："+address+"<br/>经坐标："+x+";纬坐标："+y;
			
			//配置目标地点
			var mapImgOpt={
				point:{"lng":"118.743795","lat":"31.995702"},
				title:"烽火科技",
				content:"移动信息化领导者",
				width:"400",
				height:"200"
			}
			//生成地图图片
			var mapImgSrc=b.mapImg(mapImgOpt);
			
			document.getElementById("maparea_img").setAttribute("src",mapImgSrc);
			
			//一键导航
			document.getElementById("onkeyGuide").addEventListener("click",function(){
				b.mapGuide(mapImgOpt);
			},false);
		});
	},false);
	//定义exmobi返回
	function back(){history.go(-1);}
	</script>
</body>
</html>
